<template>
  <el-col>
    <div v-if="item.deType === 0 || item.deType === 5">
      <el-radio-group
        v-model="filterType"
        size="mini"
        style="margin-bottom: 10px;"
        @change="filterTypeChange"
      >
        <el-radio label="logic">{{ $t('chart.logic_exp') }}</el-radio>
        <el-radio label="enum">{{ $t('chart.enum_exp') }}</el-radio>
      </el-radio-group>
    </div>

    <div v-if="((item.deType === 0 || item.deType === 5) && filterType === 'logic') || item.deType === 1 || item.deType === 2 || item.deType === 3">
      <div style="display: inline-block;">
        <el-button
          icon="el-icon-plus"
          circle
          size="mini"
          style="margin-bottom: 10px;"
          @click="addFilter"
        />
        <el-radio-group
          v-show="item.filter && item.filter.length > 1"
          v-model="logic"
          size="mini"
          style="margin-left: 10px;"
          @change="logicChange"
        >
          <el-radio-button label="and">{{ $t('chart.and') }}</el-radio-button>
          <el-radio-button label="or">{{ $t('chart.or') }}</el-radio-button>
        </el-radio-group>
      </div>
      <div style="max-height: 50vh;overflow-y: auto;">
        <el-row
          v-for="(f,index) in item.filter"
          :key="index"
          class="filter-item"
        >
          <el-col :span="4">
            <span>{{ item.name }}</span>
          </el-col>
          <el-col :span="8">
            <el-select
              v-model="f.term"
              size="mini"
            >
              <el-option-group
                v-for="(group,idx) in options"
                :key="idx"
                :label="group.label"
              >
                <el-option
                  v-for="opt in group.options"
                  :key="opt.value"
                  :label="opt.label"
                  :value="opt.value"
                />
              </el-option-group>
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-input
              v-show="!f.term.includes('null') && !f.term.includes('empty')"
              v-model="f.value"
              class="value-item"
              :placeholder="$t('chart.condition')"
              size="mini"
              clearable
            />
          </el-col>
          <el-col :span="6">
            <el-button
              type="text"
              icon="el-icon-delete"
              circle
              style="float: right"
              @click="removeFilter(index)"
            />
          </el-col>
        </el-row>
      </div>
    </div>

    <div v-if="(item.deType === 0 || item.deType === 5) && filterType === 'enum'">
      <span style="margin-right: 10px;">{{ $t('chart.filter_exp') }}</span>
      <el-select
        v-model="enumCheckField"
        filterable
        collapse-tags
        multiple
        :placeholder="$t('chart.pls_slc')"
        size="mini"
        @change="enumChange"
      >
        <el-option
          v-for="field in fieldOptions"
          :key="field.id"
          :label="field.text"
          :value="field.id"
        />
      </el-select>
    </div>
  </el-col>
</template>

<script>
import { multFieldValues } from '@/api/dataset/dataset'

export default {
  name: 'ResultFilterEditor',
  props: {
    chart: {
      type: Object,
      required: true
    },
    item: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      textOptions: [
        {
          label: '',
          options: [{
            value: 'eq',
            label: this.$t('chart.filter_eq')
          }, {
            value: 'not_eq',
            label: this.$t('chart.filter_not_eq')
          }]
        },
        {
          label: '',
          options: [{
            value: 'like',
            label: this.$t('chart.filter_like')
          }, {
            value: 'not like',
            label: this.$t('chart.filter_not_like')
          }]
        },
        {
          label: '',
          options: [{
            value: 'null',
            label: this.$t('chart.filter_null')
          }, {
            value: 'not_null',
            label: this.$t('chart.filter_not_null')
          }]
        },
        {
          label: '',
          options: [{
            value: 'empty',
            label: this.$t('chart.filter_empty')
          }, {
            value: 'not_empty',
            label: this.$t('chart.filter_not_empty')
          }]
        }
      ],
      dateOptions: [
        {
          label: '',
          options: [{
            value: 'eq',
            label: this.$t('chart.filter_eq')
          }, {
            value: 'not_eq',
            label: this.$t('chart.filter_not_eq')
          }]
        },
        {
          label: '',
          options: [{
            value: 'lt',
            label: this.$t('chart.filter_lt')
          }, {
            value: 'gt',
            label: this.$t('chart.filter_gt')
          }]
        },
        {
          label: '',
          options: [{
            value: 'le',
            label: this.$t('chart.filter_le')
          }, {
            value: 'ge',
            label: this.$t('chart.filter_ge')
          }]
        },
        {
          label: '',
          options: [{
            value: 'null',
            label: this.$t('chart.filter_null')
          }, {
            value: 'not_null',
            label: this.$t('chart.filter_not_null')
          }]
        }
      ],
      valueOptions: [
        {
          label: '',
          options: [{
            value: 'eq',
            label: this.$t('chart.filter_eq')
          }, {
            value: 'not_eq',
            label: this.$t('chart.filter_not_eq')
          }]
        },
        {
          label: '',
          options: [{
            value: 'lt',
            label: this.$t('chart.filter_lt')
          }, {
            value: 'gt',
            label: this.$t('chart.filter_gt')
          }]
        },
        {
          label: '',
          options: [{
            value: 'le',
            label: this.$t('chart.filter_le')
          }, {
            value: 'ge',
            label: this.$t('chart.filter_ge')
          }]
        },
        {
          label: '',
          options: [{
            value: 'null',
            label: this.$t('chart.filter_null')
          }, {
            value: 'not_null',
            label: this.$t('chart.filter_not_null')
          }]
        }
      ],
      options: [],
      logic: '',
      filterType: '',
      enumCheckField: [],
      fieldOptions: [],
      needRequestEnum: true
    }
  },
  watch: {
    'item': function() {
      this.initOptions()
    }
  },
  mounted() {
    this.initOptions()
    this.init()
  },
  methods: {
    initOptions() {
      if (this.item) {
        if (this.item.deType === 0 || this.item.deType === 5) {
          this.options = JSON.parse(JSON.stringify(this.textOptions))
        } else if (this.item.deType === 1) {
          this.options = JSON.parse(JSON.stringify(this.dateOptions))
        } else {
          this.options = JSON.parse(JSON.stringify(this.valueOptions))
        }
      }
    },
    init() {
      this.logic = this.item.logic
      this.filterType = this.item.filterType
      this.enumCheckField = this.item.enumCheckField

      // init enum option
      if (this.item.filterType === 'enum' && this.needRequestEnum) {
        this.initEnumOptions()
      }
    },
    initEnumOptions() {
      // 查找枚举值
      if (this.item.deType === 0 || this.item.deType === 5) {
        multFieldValues({ fieldIds: [this.item.id] }).then(res => {
          this.fieldOptions = this.optionData(res.data)
          this.needRequestEnum = false
        })
      }
    },
    optionData(data) {
      if (!data) return null
      return data.filter(item => !!item).map(item => {
        return {
          id: item,
          text: item
        }
      })
    },
    addFilter() {
      this.item.filter.push({
        fieldId: this.item.id,
        term: 'eq',
        value: ''
      })
    },
    removeFilter(index) {
      this.item.filter.splice(index, 1)
    },
    logicChange(val) {
      this.item.logic = val
    },
    filterTypeChange(val) {
      this.item.filterType = val
      // init enum option
      if (val === 'enum' && this.needRequestEnum) {
        this.initEnumOptions()
      }
    },
    enumChange(val) {
      this.item.enumCheckField = this.enumCheckField
    }
  }
}
</script>

<style scoped>
  .filter-item{
    width: 100%;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    padding: 4px 14px;
    margin-bottom: 10px;
    display: flex;
    justify-content: left;
    align-items: center;
  }
  .form-item ::v-deep .el-form-item__label{
    font-size: 12px;
  }
  span{
    font-size: 12px;
  }

  .value-item ::v-deep .el-input{
    position: relative;
    display: inline-block;
    width: 80px!important;
  }
</style>
